<template>
  <div
    class="water-fall-wrapper"
    :style="{
      height: Math.max(...heightList) + 'px'
    }"
  >
    <div
      class="image-wrapper"
      v-for="item in imageList"
      :key="item.id"
      :style="{
        width: item.width,
        height: item.height,
        left: item.left,
        top: item.top
      }"
    >
      <div class="image-box">
        <div class="img">
          <!-- <img :src="item[fieldNames.url] + '?imageView2/2/w/260/q/90'" alt="" /> -->
          <img :src="item[fieldNames.url] + '?x-oss-process=image/resize,w_560/interlace,1,image/format,webp'" />
          <div class="tip" v-if="posterType[item.posterSource]">{{ posterType[item.posterSource] }}</div>
        </div>
        <div class="mask">
          <div v-if="isPreview" class="btn" style="width: 36px" @click="onPreview(item)">
            <i class="el-icon-view"></i>
          </div>
          <div v-if="onModify" class="btn" @click="onModify(item)">编辑</div>
          <div v-if="onRemove" class="btn btn-delete" @click="onRemove(item)">删除</div>
          <div class="btn-online-product" v-if="onLineProduct" @click="onLineProduct(item)">在线制作</div>
        </div>
      </div>
      <div class="image-name">
        <span>{{ item[fieldNames.name] }}</span>
        <!-- <i class="el-icon-edit margin-left-xs gray" @click="onVisibleImageName(item)"></i> -->
      </div>
    </div>
    <el-dialog :visible="visible" @close="visible = false" width="auto">
      <img :src="imageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { posterType } from "@/utils/dictionary";
export default {
  name: "waterFall",
  props: {
    list: {
      type: Array,
      required: true
    },
    isPreview: {
      type: Boolean,
      default: () => {
        return true;
      }
    },
    onModify: {
      type: Function
    },
    onRemove: {
      type: Function
    },
    onLineProduct: {
      type: Function
    },
    col: {
      type: Number,
      default: 5
    },
    width: {
      type: Number,
      default: 250
    },
    gutterWidth: {
      type: Number,
      default: 27
    },
    fieldNames: {
      type: Object,
      default: () => ({
        name: "name",
        url: "url"
      })
    }
  },
  data() {
    return {
      posterType,
      imageList: [],
      heightList: new Array(this.col).fill(0),
      visible: false,
      imageUrl: ""
    };
  },
  mounted() {},
  watch: {
    list: {
      handler(list) {
        if (list.length) {
          //有数据 再去计算left  top 关闭loading
          this.render(list);
        } else {
          this.heightList = [320, 0]; //暂无数据 增加默认高度 320
          this.imageList = [];
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    async render(list) {
      this.heightList = new Array(this.col).fill(0);
      this.imageList = [];
      setTimeout(() => {
        for (let i = 0; i < list.length; i++) {
          let obj = list[i];
          if (/(.jpg|.png)$/.test(obj[this.fieldNames.url])) {
            // 1- 等宽瀑布流  依据当前窗口宽度 根据图片真实高度计算 当前窗口中图片的高度比例
            obj.height = (this.width * obj.height) / obj.width;
            obj.width = this.width;
            // 2- 排列第二行 找到上一行所存高度数组中  高度最小的那一列的位置。 将第2行的第1个图片盒子放置在它的下方
            let index = this.findMinimumIndex();
            this.imageList.push({
              ...obj,
              height: obj.height + "px",
              width: this.width + "px",
              left: index * (this.width + this.gutterWidth) + "px",
              top: this.heightList[index] + "px" // 第二行第一个图片盒子 放在第一行高度数组中 高度最小的那个位置
            });
            // 修改当前高度数组中-最小列的高度 = 上一循环中高度最小列的高度 + 间隙 + 下面图片盒子的高度
            this.heightList[index] += obj.height + 60; // 第1行排列好之后，获取第1行所有图片盒子的高度 arr[h1,h2,h3] 后续----新高度赋值给数组
          }
        }

        let si = setInterval(() => {
          if (window.lazyLoad) {
            clearInterval(si);
            window.lazyLoad();
          }
        }, 200);
      }, 100);
    },
    findMinimumIndex() {
      let minimum = Math.min(...this.heightList);
      return this.heightList.findIndex(item => minimum === item);
    },
    onPreview(item) {
      this.imageUrl = item[this.fieldNames.url];
      this.visible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.water-fall-wrapper {
  position: relative;
  min-height: 400px;
  .image-wrapper {
    position: absolute;
    cursor: pointer;
    .image-box {
      position: relative;
      overflow: hidden;
      border-radius: 5px;
      .img {
        position: relative;
        filter: blur(20px);
        opacity: 0.7;
        transition: all 0.7s ease;
        .tip {
          padding: 10px;
          height: 20px;
          border-radius: 10px;
          position: absolute;
          left: 10px;
          bottom: 10px;
          background: rgba(0, 0, 0, 0.6);
          color: #fff;
          z-index: 999;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .lazy-load {
        filter: blur(0px);
        opacity: 1;
      }
      &:hover {
        .mask {
          display: block;
        }
      }
      img {
        display: block;
        width: 100%;
      }
      .mask {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        background: rgba(0, 0, 0, 0.6);
        display: none;
        .btn {
          margin-top: 16px;
          display: inline-block;
          background-color: #fff;
          text-align: center;
          line-height: 25px;
          border-radius: 2px;
          width: 69px;
          height: 25px;
          margin: 13px;
          &.btn-delete {
            color: $red;
          }
        }
        .btn-online-product {
          position: absolute;
          bottom: 10px;
          left: 0;
          right: 0;
          margin: auto;
          width: 200px;
          height: 40px;
          background: rgba(0, 0, 0, 0.6);
          border-radius: 20px;
          color: #fff;
          text-align: center;
          line-height: 40px;
        }
      }
    }
    .image-name {
      text-align: center;
      line-height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
      .el-icon-edit {
        animation: slowDown 0.3s;
        position: absolute;
        right: 0;
        top: 18px;
        display: none;
      }
      &:hover {
        .el-icon-edit {
          display: block;
        }
      }
    }
    @keyframes slowDown {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }
}
</style>
